<template>
  <div class="role-management">
    <!-- 搜索栏 -->
    <el-form :inline="true" class="search-bar">
      <el-form-item label="角色名称：">
        <el-input v-model="searchCriteria.name" placeholder="请输入" style="width: 120px"></el-input>
      </el-form-item>
      
      <el-form-item label="权限字符：">
        <el-input v-model="searchCriteria.authChar" placeholder="请输入" style="width: 120px"></el-input>
      </el-form-item>

      <el-form-item label="角色状态：">
        <el-select v-model="searchCriteria.status" placeholder="所有" style="width: 120px">
          <el-option label="所有" value=""></el-option>
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="创建时间：">
        <el-date-picker
          v-model="searchCriteria.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始"
          end-placeholder="结束"
          style="width: 240px"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetCriteria">重置</el-button>
        <el-button type="danger" @click="deleteSelected">删除</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮组 -->
    <div class="action-buttons">
      <el-button type="primary" icon="el-icon-plus" @click="addRole">新增</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table
      :data="filteredTableData"
      style="width: 100%"
      class="custom-table"
      @selection-change="handleSelectionChange"
      ref="table"
    >
      <el-table-column type="selection" width="45"></el-table-column>
      <el-table-column prop="id" label="角色编号" width="100"></el-table-column>
      <el-table-column prop="name" label="角色名称" width="120"></el-table-column>
      <el-table-column prop="authChar" label="权限字符" width="120"></el-table-column>
      <el-table-column prop="order" label="显示顺序" width="100"></el-table-column>
      <el-table-column label="角色状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status ? 'success' : 'danger'">
            {{ scope.row.status ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editRole(scope.row)">编辑</el-button>
          <el-button type="text" size="small" style="color: #F56C6C" @click="confirmDeleteRole(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页信息 -->
    <div class="pagination-info">
      第 1 到 {{ filteredTableData.length }} 条，共 {{ filteredTableData.length }} 条记录
    </div>

    <!-- Dialog for edit and add -->
    <el-dialog :visible.sync="dialogVisible" title="角色信息">
      <el-form :model="currentRole">
        <el-form-item label="角色名称">
          <el-input v-model="currentRole.name"></el-input>
        </el-form-item>
        <el-form-item label="权限字符">
          <el-input v-model="currentRole.authChar"></el-input>
        </el-form-item>
        <el-form-item label="显示顺序">
          <el-input v-model="currentRole.order" type="number"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="currentRole.status" active-text="启用" inactive-text="禁用"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRole">确 定</el-button>
      </span>
    </el-dialog>
    
    <!-- Confirm delete dialog -->
    <el-dialog :visible.sync="confirmDeleteVisible" title="确认删除">
      <span>您确定要删除此角色吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmDeleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '管理员',
          authChar: 'admin',
          order: 1,
          status: true,
          createTime: '2018-02-16 11:33:00'
        },
        {
          id: 100,
          name: '教师',
          authChar: 'teacher',
          order: 2,
          status: true,
          createTime: '2019-12-10 19:26:58'
        },
        {
          id: 2,
          name: '学生',
          authChar: 'student',
          order: 3,
          status: true,
          createTime: '2018-02-16 11:33:00'
        }
      ],
      currentRole: {},
      dialogVisible: false,
      confirmDeleteVisible: false,
      roleToDelete: null,
      searchCriteria: {
        name: '',
        authChar: '',
        status: '',
        dateRange: []
      }
    };
  },
  computed: {
    filteredTableData() {
      return this.tableData.filter(role => {
        const matchesName = role.name.includes(this.searchCriteria.name);
        const matchesAuthChar = role.authChar.includes(this.searchCriteria.authChar);
        const matchesStatus = this.searchCriteria.status ? role.status === (this.searchCriteria.status === '1') : true;

        // Date range filter
        const matchesDateRange = this.searchCriteria.dateRange.length === 2 ?
          new Date(role.createTime) >= this.searchCriteria.dateRange[0] &&
          new Date(role.createTime) <= this.searchCriteria.dateRange[1] : true;

        return matchesName && matchesAuthChar && matchesStatus && matchesDateRange;
      });
    }
  },
  methods: {
    handleSelectionChange(val) {
      console.log('选中项:', val);
    },
    handleSearch() {
      console.log('Searching with criteria:', this.searchCriteria);
      // Updating the table is handled by computed property
    },
    resetCriteria() {
      this.searchCriteria = {
        name: '',
        authChar: '',
        status: '',
        dateRange: []
      };
      console.log('Search criteria reset');
      // Updating the table is handled by computed property
    },
    addRole() {
      this.currentRole = { name: '', authChar: '', order: null, status: true }; // reset form for new role
      this.dialogVisible = true;
    },
    editRole(role) {
      this.currentRole = { ...role }; // Clone role to edit
      this.dialogVisible = true;
    },
    saveRole() {
      if(this.currentRole.id) {
        // Edit existing role
        const index = this.tableData.findIndex(role => role.id === this.currentRole.id);
        if(index !== -1) {
          this.tableData[index] = { ...this.currentRole }; // Update the role
        }
      } else {
        // Add new role
        this.currentRole.id = Date.now(); // Generate id (simulated)
        this.tableData.push({ ...this.currentRole }); // Add the role
      }
      this.dialogVisible = false;
      console.log('Saved role:', this.currentRole);
    },
    confirmDeleteRole(role) {
      this.roleToDelete = role;
      this.confirmDeleteVisible = true;
    },
    deleteRole() {
      this.tableData = this.tableData.filter(role => role.id !== this.roleToDelete.id);
      this.confirmDeleteVisible = false;
      this.roleToDelete = null;
      console.log('Deleted role:', this.roleToDelete);
    },
    deleteSelected() {
      const selectedRows = this.$refs.table.selection;
      if (selectedRows.length === 0) {
        this.$message.warning('请先选择要删除的角色');
        return;
      }
      this.tableData = this.tableData.filter(role => !selectedRows.includes(role));
      console.log('Deleted selected roles:', selectedRows);
    },
    favoriteRole(role) {
      // Favorite logic here
      console.log('Favorited role:', role);
    }
  }
}
</script>

<style scoped>
.role-management {
  padding: 20px;
  background: #fff;
}

.search-bar {
  background: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}

.action-buttons {
  margin: 15px 0;
}

.custom-table {
  margin-top: 10px;
}

.el-form-item {
  margin-bottom: 0;
}

.el-button--text {
  padding: 0 5px;
}

.pagination-info {
  padding: 12px 16px;
  background: #f5f7fa;
  border: 1px solid #ebeef5;
  border-top: none;
  text-align: right;
  color: #606266;
  font-size: 13px;
}

.el-tag {
  padding: 0 8px;
  height: 24px;
  line-height: 22px;
}
</style>